<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{$site_name} 用户登录</title>
    <meta name="applicable-device" content="pc,mobile">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <script src="/static/js/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/js/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/login.css"/>
    <script src="/static/js/center.js?v={:release()}"></script>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="header"></div>
<div id="content" class="userLogin layui-fluid">
    <div class="formLogin form-items active">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this" data-action="login">账号登录</li>
                <li data-action="mobileLogin">免密登录</li>
            </ul>
            <div class="layui-tab-content pb0">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form login" action="/index/user/login" method="post">
                        <div class="layui-form-item item-input">
                            <input type="text" id="nickname" name="nickname" lay-verify="required" data-title="账号"
                                   placeholder="{:__('请输入账号或邮箱')}" class="inputStyle" value="">
                        </div>
                        <div class="layui-form-item item-input">
                            <input type="password" id="pwd" name="pwd" lay-verify="required" data-title="密码"
                                   maxlength="32"
                                   placeholder="{:__('密码')}" class="inputStyle" value="">
                            <span class="fr-icon visiblePwd"><i class="layui-icon layui-icon-eye-invisible"></i></span>
                        </div>
                    </form>
                </div>
                <div class="layui-tab-item">
                    <form class="layui-form mobileLogin" action="/index/user/mobileLogin" method="post">
                        <div class="layui-form-item item-input">
                            <input type="text" id="mobile" name="mobile" lay-verify="required" data-title="手机号"
                                   placeholder="{:__('请输入手机号码')}" class="inputStyle mobile" value="15100000000">
                        </div>
                        <div class="layui-form-item item-input">
                            <input type="text" id="captcha" name="captcha" lay-verify="required" data-title="验证码"
                                   maxlength="6"
                                   placeholder="{:__('验证码')}" class="inputStyle" value="123456">
                            <input type="text" hidden name="event" class="event" value="login">
                            <span class="fr-icon getCaptcha" lay-ajax data-url="/api/ajax/smsSend"
                                  data-object="mobile:mobile,event:event">获取验证码</span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-form">
            <input type="hidden" id="token" name="__token__" value="{:token()}"/>
            <div class="layui-form-item">
                <div class="fl">
                    <input type="checkbox" name="remember" lay-skin="primary"
                           title="{:__('记住密码')}" checked>
                </div>
                <div class="fr">
                    <a lay-open data-title="找回密码" data-area="500px,320px" data-object="top"
                       data-url="/index/user/forgot"
                       class="forgot-link" style="margin-top: 7px;">{:__('忘记密码？')}</a>
                </div>
            </div>

            <div class="layui-form-item">
                <input id="iframeSubmit" type="submit" value="{:__('立即登录')}"
                       class="layui-btn layui-btn-login layui-btn-fluid layui-btn-normal">
            </div>
            <div class="agreement">
                <span>未注册手机验证后自动登录，注册即代表同意<a href="#">《用户协议》</a>以及网站<a
                        href="#">《隐私保护指引》</a></span>
            </div>
        </div>
    </div>

    <div class="scanLogin form-items">
        <div class="qrcode-title">扫码登录</div>
        <div class="qrcode-Box">
            <div class="qrcode-img" id="qrcode" title="">
                <canvas width="150" height="150" style="display: none;"></canvas>
                <img id="scanCover" src="/static/images/qrcode-qun.png" style="display: block;" width="150" height="150"
                     alt="Scan me!">
            </div>
            <p>打开<a href="#" target="_blank" rel="noopener noreferrer">{$site_name} App</a></p>
            <p>在「我的」页面右上角打开扫一扫</p>
        </div>
    </div>
    <div class="loginLine"></div>
    <div class="socialLogin">
        <span class="social-title">社交帐号登录</span>
        <div class="social-group">
            <a class="social-item" href="{:url('/index/third/login',['type'=>'weixin'])}&ref={$referer}"
               target="_top">
                                <span>
                                    <i class="layui-icon layui-icon-login-wechat"></i>
                                    <span class="tit">微信</span>
                                </span>
            </a>
            <a class="social-item" href="{:url('/index/third/login',['type'=>'qq'])}&ref={$referer}"
               target="_top">
                                <span>
                                    <i class="layui-icon layui-icon-login-qq"></i>
                                    <span class="tit">QQ</span>
                                </span>
            </a>
            <a class="social-item" href="{:url('/index/third/login',['type'=>'weibo'])}&ref={$referer}"
               target="_top">
                                <span><i class="layui-icon layui-icon-login-weibo"></i>
                                    <span class="tit">微博</span></span>
            </a>
        </div>
    </div>

    <div class="appUserDown">
        <div class="fr">
            <a class="link" href="#" target="_top">
                <span>
                    <i class="layui-icon layui-icon-ios"></i>
                    <i class="layui-icon layui-icon-android"></i>
                    <i class="layui-icon layui-icon-windows"></i>
                    <span class="tit">下载 APP</span>
                </span>
            </a>
        </div>
    </div>

    <div class="switchTabs" id="switchTabs">
        <img class="switch-item active" data-action="scanLogin" src="/static/images/qrcode-login.png" alt="qrcode">
        <img class="switch-item" data-action="login" src="/static/images/mobile-login.png" alt="qrcode">
    </div>

</div>
<script>
    layui.use(['jquery', 'layer'], function (e) {

        let $ = layui.jquery;
        let layer = layui.layer;
        let queryTicket = null;

        /* 点击执行登录 */
        $('#iframeSubmit').click(function (e) {
            let data = {};
            let action = $('li.layui-this').data('action');
            let form = $('form.' + action);
            form.find('input').each(function (index, item) {
                let value = $(item).val();
                let name = $(item).attr('name');
                let title = $(item).data('title');
                if (!value) {
                    layer.msg(title + '不能为空', {icon: 5});
                    $(item).focus();
                    return false;
                }
                data[name] = value;
            });

            /* 发送登录数据 */
            if (Object.keys(data).length >= 2) {
                $.post(form.attr('action'), data, function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg);
                        setTimeout(function () {
                            window.location.href = '/index/user/index';
                        }, 1000);
                    } else {
                        layer.msg(res.msg)
                    }
                }, 'json');
            }
        })

        /* 显示隐藏密码 */
        $('.visiblePwd').click(function () {
            let type = $('#pwd').attr('type');
            if (type === 'password') {
                $('#pwd').attr('type', 'text');
                $(this).find('i.layui-icon').addClass('layui-icon-eye').removeClass('layui-icon-eye-invisible');
            } else {
                $('#pwd').attr('type', 'password');
                $(this).find('i.layui-icon').addClass('layui-icon-eye-invisible').removeClass('layui-icon-eye');
            }
        });

        /* 切换登录方式 */
        $("#switchTabs .switch-item").click(function () {
            $(this).removeClass('active');
            let action = $(this).data('action');
            $("#switchTabs .switch-item").not($(this)).addClass('active');
            if (action === 'scanLogin') {
                $('.scanLogin').addClass('active');
                $('.formLogin').removeClass('active');
                $.get('/index/user/scanLogin', {}, function (res) {
                    if (res.code === 200) {
                        !queryTicket && queryRequest(res.data.ticket);
                        $('#scanCover').attr('src', res.data.qrcode || '/static/images/qrcode.png');
                    } else {
                        layer.msg(res.msg)
                    }
                })
            } else {
                clearInterval(queryTicket);
                queryTicket = null;
                $('.formLogin').addClass('active');
                $('.scanLogin').removeClass('active');
            }
        });

        /* 定时器 */
        const queryRequest = function (ticket) {
            queryTicket = setInterval(function () {
                $.post('/index/user/scanTicket', {
                    ticket: ticket,
                }, function (res) {
                    if (res.code === 200) {
                        clearInterval(queryTicket);
                        top.layer.msg(res.msg);
                        top.location.reload();
                    }
                }, 'json');
            }, 1000);
        }
    });
</script>
</body>
</html>